Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Add padding to diff code blocks #10996

Merged
merged 2 commits into from
Aug 7, 2024
Merged

Conversation

chargome
Copy link
Member

@chargome chargome commented Aug 6, 2024

fixes #10510

Copy link

vercel bot commented Aug 6, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
changelog ✅ Ready (Inspect) Visit Preview 💬 Add feedback Aug 6, 2024 3:34pm
develop-docs ✅ Ready (Inspect) Visit Preview 💬 Add feedback Aug 6, 2024 3:34pm
sentry-docs ✅ Ready (Inspect) Visit Preview 💬 Add feedback Aug 6, 2024 3:34pm

@chargome
Copy link
Member Author

chargome commented Aug 6, 2024

Before:
Screenshot 2024-08-06 at 17 02 38

After:
Screenshot 2024-08-06 at 16 59 01

Copy link
Member

@szokeasaurusrex szokeasaurusrex left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I will take a look at the preview once it is ready. Since I am not super experienced with CSS, it would be good if someone with more experience could take a look at the code changes

@@ -73,12 +76,16 @@
:global(.diff-inserted),
:global(.inserted) {
background-color: rgba(16, 185, 129, 0.2);
margin-left: -12px;
width: calc(100% + 12px);
}

/* Set deleted line (-) color */
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe update this comment (and the comment for the above changes) to reflect that we are also setting the padding here

Copy link

codecov bot commented Aug 6, 2024

Bundle Report

Changes will increase total bundle size by 158 bytes ⬆️

Bundle name Size Change
sentry-docs-server 8.25MB 6 bytes ⬇️
sentry-docs-edge-server 252.6kB 3 bytes ⬇️
sentry-docs-client 6.24MB 167 bytes ⬆️

@szokeasaurusrex
Copy link
Member

We might also want to inform folks somewhere about how they should write diff blocks going forward. Previously, unchanged and changed lines were only aligned when the unchanged lines were indented two spaces, like so:

  This unchanged line
+ is aligned with this changed line.

But this unchanged line
+ would not be aligned.

Following your changes, does alignment work in the same way?

@chargome
Copy link
Member Author

chargome commented Aug 6, 2024

Alignment works the same way, but the padding is now added automatically. So if a diff block currently contains manual indentations, the padding will be added on top. There are ~100 diff blocks in the project, I can check if they need to be updated.

@chargome chargome merged commit 57d6fd6 into master Aug 7, 2024
9 checks passed
@chargome chargome deleted the cg/fix-diff-code-blocks branch August 7, 2024 12:37
@ezio-melotti
Copy link

The selector is a bit too generic and adds padding after other operators in the code examples. I'm trying to fix that in:

@github-actions github-actions bot locked and limited conversation to collaborators Aug 27, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Diff code blocks have different padding from normal code blocks
4 participants